import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  /**
   * 让项目启用 Vue 3 单文件组件（.vue 文件）的支持。即让 Vite 能够解析和编译 .vue 文件中的 template、script、style 部分
   */
  plugins: [vue()],
  build: {
    /**
     * lib 配置是 Vite 的库模式配置，专门用于构建可发布的 npm 包或组件库。
     * 在 build 中配置 lib 时，Vite 会：
     * * 切换到库构建模式（而不是应用构建模式）
     * * 生成适合分发的文件格式
     * * 不会生成 HTML 文件
     * 若为普通应用构建（没有 lib）：输出：index.html + assets/ 文件夹，用于部署到服务器运行
     * 若为库构建：输出：index.mjs + index.umd.js + style.css，用于发布到 npm 包供其他项目使用
     */
    lib: {
      /**
       * 指定构建的入口文件，该文件需要：导出所有需要暴露的组件/功能
       */
      entry: 'src/index.ts',
      /**
       * 指定当前库的全局变量名
       * 当库被通过 <script> 标签直接引入时，可以通过 window.JrdTour 访问库中的所有内容
       */
      name: 'JrdTour',
      /**
       * 指定构建输出的文件名，Vite 会自动添加文件扩展名
       * 默认情况下，Vite 会生成 index.mjs 和 index.umd.js 两个文件 以及 style.css 文件
       * 其中 index.mjs 是 ES 模块格式，index.umd.js 是 UMD 格式
       */
      fileName: 'index'
    },
    rollupOptions: {
      /**
       * 声明 vue 为外部依赖，不会被打包进最终的库文件中。
       */
      external: ['vue'],
      output: {
        /**
         * 首先，这个配置是服务于打包输出的UMD模块的
         * UMD（Universal Module Definition）是一种通用的模块定义格式，旨在让一个模块能够在多种不同的环境中运行。说白了就是一种模块规范，UMD内部会自动判断当前的运行环境，然后执行对应的模块规范，UMD中存在对应global的判断，在浏览器中，global就是window
         * 因为我们把vue声明为外部依赖，所以打包时，不会把vue打包进最终的库文件中，但最终的库文件中，需要使用vue，所以需要通过globals中的配置vue: 'Vue'，来告诉UMD，在最终的库文件中，使用global.Vue来访问vue
         */
        globals: {
          vue: 'Vue'
        }
      }
    }
  },
  // 添加TypeScript支持
  esbuild: {
    target: 'es2020'
  }
})

/**
 * 组件库中的组件被消费的逻辑：
 * 
 * 组件库中的组件和终端项目中普通的.vue组件一样，组件最终被编译的产物，本质是一个包含渲染逻辑的对象。
 * 
 * 只不过终端项目中的组件，是一个.vue文件，在对当前模块进行打包构建时，.vue组件在被当前模块导入之前，会先进行处理，转化为js对象。但对于引入的三方组件库里的组件，已经是处理好的js文件，在当前模块打包构建时，无需再进行转化
 * 
 * 所以组件库编译时，完全类似于终端web应用，把.vue文件正常编译为js即可
 */